<template>
    <div class="mine xms-flex-wrap">
        <div class="xms-flex-middle">
            <div class="mine-head">
                <div class="mine-bg"></div>
                <div class="mine-content">
                    <img :src="info.header">
                    <div class="mine-name">{{info.name}}<van-tag color="#ffbd27" class="ml10">{{classList[info.class]}}</van-tag></div>
                    <div class="mine-bottom">
                        <div class="flex-column align-items-center justify-content-center"
                             @click="$router.push({path:'/money'})">
                            <div class="font-16 font-color">¥{{info.money}}</div>
                            <div class="mt5 font-grey">我的收益</div>
                        </div>
                        <div v-if="info.class!=2 && info.class!=3" class="flex-column align-items-center justify-content-center"
                             @click="$router.push({path:'/level'})">
                            <div class="font-16 font-color">{{info.push}}</div>
                            <div class="mt5 font-grey">我的团队</div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="info.class!=2 && info.class!=3" class="mine-body">
                <div class="flex-column align-items-center" @click="$router.push({name:'Order',query:{state:0}})">
                    <img src="../assets/img/order-waitpay.png">
                    <div class="mt5">
                        待付款
                    </div>
                </div>
                <div class="flex-column align-items-center" @click="$router.push({name:'Order',query:{state:1}})">
                    <img src="../assets/img/order-success.png">
                    <div class="mt5">
                        已完成
                    </div>
                </div>
                <div class="flex-column align-items-center" @click="$router.push({name:'Order',query:{state:2}})">
                    <img src="../assets/img/order-cancel.png">
                    <div class="mt5">
                        已取消
                    </div>
                </div>
                <div class="flex-column align-items-center" @click="$router.push({name:'Order',query:{state:3}})">
                    <img src="../assets/img/order-halfpay.png">
                    <div class="mt5">
                        半付款
                    </div>
                </div>
            </div>
            <div class="mine-list">
                <router-link v-if="info.class!=2 && info.class!=3" to="/signs">
                    <van-cell title="上课记录" is-link></van-cell>
                </router-link>
                <router-link to="/log">
                    <van-cell title="操作日志" is-link></van-cell>
                </router-link>
                    <van-cell title="退出登录" @click="lower"></van-cell>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "Mine",
        data() {
            return {
                url: {
                    users: this.axiosUrl + 'users/users',
                    lower: this.axiosUrl + 'Login/lower',
                },
                info: '',
                classList:['','用户','学校','讲师']
            }
        },
        components: {},
        mounted() {
            this.users()
            this.$wxConfig.share(this.$route.path)
        },
        methods: {
            users() {
                let _this = this
                _this.$http.post(_this.url.users, {}, (res) => {
                    _this.info = res
                })
            },
            lower(){
                let _this = this
                _this.$http.post(_this.url.lower, {}, () => {
                    _this.$toast('退出成功')
                    _this.$router.push({path:'/'})
                    localStorage.removeItem('token')
                })
            }
        }
    }
</script>
<style lang="stylus" scoped>
    .mine-head
        position relative
        padding-top 100px

        .mine-bg
            position absolute
            width 100%
            height 150px
            top 0
            background #FFBD27

        .mine-content
            display flex
            flex-direction column
            justify-content space-between
            align-items center
            position relative
            background white
            box-shadow 0 0 10px #ccc
            height 150px
            border-radius 8px
            margin 0 16px

            img
                position absolute
                background white
                border-radius 60px
                top -35px
                width 70px
                height 70px
                border 5px solid white
                box-shadow 0 0 10px #ccc

            .mine-name
                margin-top 60px
                font-size 14px

            .mine-bottom
                width 100%
                display flex
                justify-content space-between
                height 60px

                > div
                    flex 1

    .mine-body
        display: flex
        flex-direction row
        justify-content space-around
        background white
        padding 12px 0
        margin 16px 16px 0
        border-radius 8px

        img
            width 30px
            height 30px

    .mine-list
        margin 16px
        background white
        border-radius 8px
        overflow hidden

</style>
